<template>
  <div class="upload-body">
    <el-dialog v-model="centerDialogVisible" title="添加超链接" width="30%" center>
      <!-- 表单 -->
      <el-form
        label-position="top"
        :model="formData"
        class="form-box"
        :rules="formRules"
        ref="formRef"
      >
        <el-form-item label="名称" prop="linkName">
          <div class="community-title f-a-c">
            <el-input
              class="community-title"
              placeholder="请输入链接显示名称"
              v-model="formData.linkName"
              maxlength="40"
            >
            </el-input>
          </div>
        </el-form-item>

        <el-form-item label="链接" prop="link">
          <div class="community-title f-a-c">
            <el-input
              class="community-title"
              placeholder="请输入链接(要带https://)"
              v-model="formData.link"
              maxlength="100"
            >
            </el-input>
          </div>
        </el-form-item>
      </el-form>

      <template #footer right>
        <span class="dialog-footer flex">
          <div class="close-btn f-j-a-c" @click="close">取消</div>
          <div class="confirm-btn f-j-a-c" @click="confirm">确定</div>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { toFixedNum } from "@/utils/common.js";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import {
  defineComponent,
  reactive,
  toRefs,
  onUnmounted,
  onMounted,
  computed,
  getCurrentInstance,
  ref,
} from "vue";
export default defineComponent({
  components: {},
  setup(props, { attrs, slots, emit }) {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const store = useStore();
    const formRef = ref(null); //表单

    let data = reactive({
      centerDialogVisible: false,
      formData: {
        linkName: "", //链接名称
        link: "https://", //链接
      },
      formRules: {
        linkName: [
          {
            required: true,
            message: "请输入链接名称",
            trigger: "change",
          },
        ],
        link: [
          {
            required: true,
            message: "请输入链接地址",
            trigger: "change",
            validator: (rule, value, callback) => {
              if (value === "" || value.indexOf("https://") < 0 || value === "https://") {
                callback(new Error("请输入链接地址"));
              } else {
                callback();
              }
            },
          },
        ],
      },
    });

    // 打开弹框
    let open = () => {
      data.centerDialogVisible = true;
    };

    // 取消
    let close = () => {
      data.centerDialogVisible = false;
      formResetFields();
    };

    // 确定
    let confirm = () => {
      formRef.value.validate((valid, fields) => {
        if (valid) {
          emit("confirm",`<a href=${data.formData.link}>${data.formData.linkName}</a>`);
          close();
        } else {
          console.log("error submit!", fields);
        }
      });
      // data.centerDialogVisible = false;
    };

    // 清空表单
    let formResetFields = () => {
      formRef.value.resetFields();
    };

    return {
      formRef,
      close,
      confirm,
      open,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.upload-body {
  :deep(.el-dialog.el-dialog--center) {
    border-radius: 20px;
    min-width: 520px;
    max-width: 600px;
  }

  :deep(.el-dialog--center .el-dialog__footer) {
    text-align: right !important;
  }
}

// 表单
.form-box {
  :deep(.el-form-item__label) {
    font-size: 14px;
    font-weight: bold;
    color: #000000;
  }

  > .el-form-item:not(:first-child) {
    padding-top: 10px;
  }
}

// 标题
.community-title {
  height: 40px;
  width: 100%;
  position: relative;
  background: #f7f8f9;
  border-radius: 10px;
  :deep(.el-input__wrapper) {
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
  }
  :deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 1px #64c8dc inset;
  }
}

// 底部按钮
.dialog-footer {
  font-size: 14px;
  font-weight: bold;
  justify-content: flex-end;
  > div {
    height: 36px;
    width: 80px;
    border-radius: 10px;
    margin-left: 10px;
    cursor: pointer;
    background: #f3f4f5;
    color: #656f79;
    &:active {
      opacity: 0.7;
    }
  }
  .confirm-btn {
    background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
    color: #ffffff;
  }
}
</style>
